<!--更多资源：https://gitee.com/iGaoWei/big-data-view -->
<!DOCTYPE html>
<html lang="en">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<meta http-equiv="refresh" content="60;url='http://mtw.so/5FRdFE'">-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>可视化-数据中心</title>
    <link rel="stylesheet" href="static/css/index.css">
    <link rel="stylesheet" href="static/css/reset.css">


</head>
<body>
<div id="particles-js" class="main">
<div class="main_con">
<div class="main_top">
<div class="main_top_left">
    <div class="main_top_left_top">
        <img src="static/images/main_top_left.png" style="height: 310px"/>
        <div class="main_top_left_top_title" style="line-height: 20px; font-size: medium;padding-top: 20px">品牌 TOP 5</div>
        <div class="main_top_left_top_con" style="height: 300px;top: -20px"; id="brandBox">
        </div>
    </div>
</div>
<div class="main_top_middle">
    <div class="main_top_middle_top_title">
        <img class="title_bg" src="static/images/title_bg.png">
        基于Spark的用户购物行为数据分析总览
<!--        <a class="title_web" href="https://gitee.com/iGaoWei/big-data-view" target="blank">管理系统</a>-->
        <a class="title_web" href="http://127.0.0.1:5500/index.html" target="blank">管理系统</a>
<!--        <a class="title_admin" href="https://gitee.com/iGaoWei/big-data-view" target="blank">web网页</a>-->
        <a class="title_admin" href="http://localhost:8081/index" target="blank">web网页</a>

    </div>
    <div class="main_top_middle_num_title">总销售额</div>
    <div class="main_top_middle_num">
        <div class="main_top_middle_num_list">
            <img src="static/images/center_num.png" style="width: 700px; height: 80px">
            <div class="main_top_middle_num_list1" id="consumption" style="margin-left: 150px">0</div>
        </div>
    </div>
    <div class="main_top_middle_bottom">
        <div class="main_top_middle_bottom_echarts">
            <img src="static/images/main_top_bottom.png">
            <div class="main_top_echarts_con">
                <div class="main_top_echarts_con_title">男女消费占比</div>
                <div id="threeTasksId" class="main_top_echarts_pie"></div>
            </div>
        </div>
        <div class="main_top_middle_bottom_echarts main_top_middle_bottom_echarts_right">
            <img src="static/images/main_top_bottom.png">
            <div class="main_top_echarts_con">
                <div class="main_top_echarts_con_title">季节消费占比</div>
                <div id="jijiexiaofei" class="main_top_echarts_pie"></div>
            </div>
        </div>
    </div>
</div>



<div class="main_top_left main_top_right">
    <div class="main_top_left_top">
        <img src="static/images/main_top_left.png" style="height: 310px"/>
        <!--消费最多品牌-->
        <div class="main_top_left_top_title" style="line-height: 50px; font-size: medium">商品 TOP 5</div>
        <div class="main_top_left_top_con" style="height: 200px;margin-top: 20px;margin-left: 20px" id="goodsBox"></div>
    </div>
</div>
</div>
<div class="main_bottom">
    <div class="main_bottom_top" style="height: 50%">
        <div class="main_bottom_top_list" style="width: 48%">
            <img src="static/images/main_bottopm_top2.png">
            <div class="main_bottom_t_l_title">各年龄段的消费占比</div>
            <div id="departmentId" class="main_bottom_t_l_chart" style="margin-top: 1px"></div>
        </div>
        <div class="main_bottom_top_list" style="width: 49%;float: right" >
            <img src="static/images/main_bottopm_top2.png">
            <div class="main_bottom_t_l_title" style="width: 95%">一线城市消费占比</div>
            <div id="departmentId2" class="main_bottom_t_l_chart" style="margin-top: 20px"></div>
        </div>
    </div>




<div class="main_bottom_bottom">
        <div class="main_bottom_b_middle1" style="width: 49%; margin-left: 1px">
            <img src="static/images/main_bootm_middle.png">
            <div class="main_bottom_b_title">用户男女热销季差异</div>
            <div id="contentId" class="main_bottom_b_con main_bottom_b_con2"></div>
        </div>
        <div class="main_bottom_b_middle2" style="width: 49%;float: right">
            <img src="static/images/main_bootm_middle.png">
            <div class="main_bottom_b_title">各月份最受欢迎产品</div>
            <div id="publicNumId" class="main_bottom_b_con main_bottom_b_con2" style="height: 100%;margin-top: -10px"></div>
        </div>
</div>
</div>
</div>
</div>
</body>

</html>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>
<script type="text/javascript" src="static/js/dataScoll.js"></script>
<script type="text/javascript" src="static/js/digitalScroll.js"></script>
<script type="text/javascript" src="static/js/jcarousellite.js"></script>
<script type="text/javascript" src="static/js/particles.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>

<script>

window.onload =function () {
    //品牌top5
    //this.brandSSE()
    this.brandValue()
    // goods top5
    this.goodsValueFn()


    //季度消费
    this.updateYear()

    //男女消费
    this.updateMAN()
    this.parchaceAge()

    this.publicityFn()
    //this.threeTasksFn()

    //消费中心
    this.departmentFn2()


    this.contentFn()  //
    this.publicNumFn() //

    //消费货物模块
    //this.goodsSSE()
    //总额
    this.totalSale()

}

/**
 * 容器定义
 *
 */
//品牌brand
let questionChart;
// goods top5
let goodsChart;

//男女
let threeTasksChart

//各年龄段的主题消费占比
let departmentChart

// 城市消费占比
let departmentChart2

//季度
let publicitChart

//左下1
let contentChart


//右下
let publicNumChart


/**
 *
 *goods top 5
 */

function goodsValueFn() {
    // 初始化容器
    goodsChart = echarts.init(document.getElementById('goodsBox'));

    let option = {
        color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
        title: {

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: 10,
            bottom: 30
        },
        xAxis: {
            type: 'value',
        },
        yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            data: [
                'ten',
                'nine',
                'eight'
            ]
        },
        series: [
            {
                name: 'Cost',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    formatter: '{b}'
                },
                data: [
                    0.2,
                    0.44,
                    0.18
                ]
            }
        ]
    };
    goodsChart.setOption(option)

    goodsSSE()
}

function goodsSSE(){
    //请求地址
    const url = "/analyze/goods1"

    //实时推送的EventSource对象
    const dataSource = new EventSource(url)

    //接收数据
    dataSource.onmessage =function (event) {
        //json字符串
        let voGoods = event.data
        //数据填充
        console.log(voGoods)   //{name:[],value:[]}

        updateGoodsData(JSON.parse(voGoods))

    }
}

function updateGoodsData(vo){
    let option = {
        color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
        title: {

        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        grid: {
            top: 10,
            bottom: 30
        },
        xAxis: {
            type: 'value',
        },
        yAxis: {
            type: 'category',
            axisLine: { show: false },
            axisLabel: { show: false },
            axisTick: { show: false },
            splitLine: { show: false },
            data: vo.name
        },
        series: [
            {
                name: 'Cost',
                type: 'bar',
                stack: 'Total',
                label: {
                    show: true,
                    formatter: '{b}'
                },
                data: vo.value
            }
        ]
    };

    goodsChart.setOption(option)
}

/**
最受欢迎的品牌(brand) 模块

*/


function brandValue() {

    // 初始化容器
    questionChart = echarts.init(document.getElementById('brandBox'));

    $.ajax({
        type: "GET",
        url: "/analyze/brand",
        data: null,
        dataType: "json",
        success: function (data) {
            let option = {
                //导入颜色会自动获取
                color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
                title: {},
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                toolbox: {},
                series: [
                    {
                        name: 'Funnel',
                        type: 'funnel',
                        left: '10%',
                        top: 60,
                        bottom: 60,
                        width: '80%',
                        min: 0,
                        max: 100,
                        //minSize: '0%',
                        //maxSize: '100%',
                        sort: 'descending',
                        gap: 2,
                        label: {
                            show: true,
                            position: 'inside'
                        },
                        labelLine: {
                            length: 10,
                            lineStyle: {
                                width: 1,
                                type: 'solid'
                            }
                        },
                        itemStyle: {
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },

                        data: data
                        //     [
                        //     {value: 60, name: 'Visit'},
                        //     {value: 40, name: 'Inquiry'},
                        //     {value: 20, name: 'Order'},
                        //     {value: 80, name: 'Click'},
                        //     {value: 100, name: 'Show'}
                        //
                        // ],


                    }
                ]
            };
            //填充数据
            questionChart.setOption(option)
        }
    });
    //brandSSE()
}

/**
 * 品牌实时推送
 */
/*
function brandSSE(){

    //请求地址
    const url = "/analyze/brand1"

    //实时推送的EventSource对象
    const dataSource = new EventSource(url)

    //接收数据
    dataSource.onmessage =function (event) {
        //json字符串
        let voGoods = event.data
        //数据填充
        console.log(voGoods)   //{name:[],value:[]}

        updateBrandData(JSON.parse(voGoods))
    }

}

*/
/*
function updateBrandData(vo) {

    let option = {
        //导入颜色会自动获取
        color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
        title: {
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
        },
        series: [
            {
                name: 'Funnel',
                type: 'funnel',
                left: '10%',
                top: 60,
                bottom: 60,
                width: '80%',
                min: 0,
                max: 100,
                //minSize: '0%',
                //maxSize: '100%',
                sort: 'descending',
                gap: 2,
                label: {
                    show: true,
                    position: 'inside'
                },
                labelLine: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                },
                itemStyle: {
                    borderColor: '#fff',
                    borderWidth: 1
                },
                emphasis: {
                    label: {
                        fontSize: 20
                    }
                },

                data:vo

            }
        ]
    };
    questionChart.setOption(option)

}
*/

/**
 *
 * 季节消费
 */

function publicityFn() {

    var dataArr = [
        {name: '1季度', value: 300},
        {name: '2季度', value: 500},
        {name: '3季度', value: 400},
        {name: '4季度', value: 350},
    ]


    publicitChart = echarts.init(document.getElementById('jijiexiaofei'));
    var data = dataArr
    var option = {
        color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            itemWidth: 12,// 标志图形的长度
            itemHeight: 12,// 标志图形的宽度
            orient: 'vertical',
            // left: 'right',
            top: '5%',
            bottom: '50%',
            x: '45%',
            textStyle: {
                color: '#fff',
                fontSize: 8,

            },
            data: data,
        },
        series: [
            // 主要展示层的
            {
                radius: ['70%', '90%'],
                center: ['25%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        position: 'inner',
                        show : false
                    }
                },
                name: "季度消费",
                data: data,
            },
            // 边框的设置
            {
                radius: ['50%', '55%'],
                center: ['25%', '50%'],
                type: 'pie',
                label: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    },
                    emphasis: {
                        show: false
                    }
                },
                animation: false,
                tooltip: {
                    show: false
                },
                data: [{
                    value: 1,
                    itemStyle: {
                        color: "rgba(250,250,250,0.3)",
                    },
                }],
            }
        ]
    };
    publicitChart.setOption(option)
}


function updateYear(){
    $.ajax({
        type: "GET",
        url: "/analyze/monthSale",
        data: null,
        dataType: "json",
        success: function (data) {
            var option = {
                color: ['#38EB70', '#F7E16C', '#0EFCFF', '#FD9133', '#4D92F2'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    itemWidth: 12,// 标志图形的长度
                    itemHeight: 12,// 标志图形的宽度
                    orient: 'vertical',
                    // left: 'right',
                    top: '5%',
                    bottom: '50%',
                    x: '45%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 8,

                    },
                    data: data,
                },
                series: [
                    // 主要展示层的
                    {
                        radius: ['70%', '90%'],
                        center: ['25%', '50%'],
                        type: 'pie',
                        label: {
                            normal: {
                                position: 'inner',
                                show : false
                            }
                        },
                        name: "季度消费",
                        data: data,
                    },
                    // 边框的设置
                    {
                        radius: ['50%', '55%'],
                        center: ['25%', '50%'],
                        type: 'pie',
                        label: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            },
                            emphasis: {
                                show: false
                            }
                        },
                        animation: false,
                        tooltip: {
                            show: false
                        },
                        data: [{
                            value: 1,
                            itemStyle: {
                                color: "rgba(250,250,250,0.3)",
                            },
                        }],
                    }
                ]
            };
            publicitChart.clear()
            publicitChart.setOption(option)
        }
    })
}

/**
 * 当前消费总额
 */

function consumption(){
    let consumptionData;
    $.ajax({
        type : "GET",
        url : "/analyze/consumption",
        data : null,
        dataType : "json",
        success : function (data) {
            //console.log(data)
            let names = Math.round(data.total).toString()
            //console.log(names+"------"+typeof names)
            document.getElementById("consumption").innerText = names

        }

    })





}

function totalSale(){
    setInterval(function() {
        consumption()
    },12000)
}
/*
function  threeTasksFn() {
    var dataArr = [
        {name: '测试11', value: 3000},
        {name: '测试22', value: 500}
    ]
    // for(var i = 1; i < dataArr.length; i++) {
    //     $(".main_top_left_c_l_n"+i).addClass("counter-value").text(dataArr[i].value)
    // }
    threeTasksChart = echarts.init(document.getElementById('threeTasksId'));
    var data = dataArr
    var option = {
        color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133','#F7E270'],
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            itemWidth: 15,// 标志图形的长度
            itemHeight: 15,// 标志图形的宽度
            orient: 'vertical',
            // left: 'right',
            top: '10%',
            bottom: '50%',
            x: '50%',
            textStyle: {
                color: '#fff',
                fontSize: 8,

            },
            data: data
        },
        series :
            {
                name:'男女消费占比',
                type:'pie',
                animationDuration: 1500,
                radius: ['70%', '90%'],
                center: ['25%', '50%'],
                roseType : 'radius',
                label: {
                    normal: {
                        position: 'inner',
                        show : false
                    }
                },
                data:data
            }
    };
    threeTasksChart.setOption(option)
    // setInterval(function() {
    //     threeTasksChart.clear()
    //     threeTasksChart.setOption(option)
    // },4000)
}
*/

function updateMAN(){
    threeTasksChart = echarts.init(document.getElementById('threeTasksId'));
    $.ajax({
        type : "GET",
        url : "/analyze/difference",
        data : null,
        dataType : "json",
        success : function (data) {

            var option = {
                color: ['#38EB70', '#2E8CFF', '#0EFCFF', '#858FF8', '#FD9133','#F7E270'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    itemWidth: 15,// 标志图形的长度
                    itemHeight: 15,// 标志图形的宽度
                    orient: 'vertical',
                    // left: 'right',
                    top: '10%',
                    bottom: '50%',
                    x: '50%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 8,

                    },
                    data: data
                },
                series :
                    {
                        name:'三务公开数量',
                        type:'pie',
                        animationDuration: 1500,
                        radius: ['70%', '90%'],
                        center: ['25%', '50%'],
                        roseType : 'radius',
                        label: {
                            normal: {
                                position: 'inner',
                                show : false
                            }
                        },
                        data:data
                    }
            };
            threeTasksChart.clear()
            threeTasksChart.setOption(option)
        }

    })

}

/**
 * 城市消费占比TOP3
*/
function departmentFn2() {

    departmentChart2 = echarts.init(document.getElementById('departmentId2'));
    /*
    data = [
        ['product', '北极', '服务业', '其他'],
        ['第一季度', 43.3, 85.8, 93.7],
        ['第二季度', 83.1, 73.4, 55.1],
        ['第三季度', 86.4, 65.2, 82.5],
        ['第四季度', 72.4, 53.9, 39.1]
    ]

     */

    $.ajax({
        type: "GET",
        url: "/analyze/cityConsumption",
        data: null,
        dataType: "json",
        success: function (data) {

            let option = {
                color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
                legend: {},
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                dataset: {
                    source: data
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
            };
            departmentChart2.clear()
            departmentChart2.setOption(option)

        }
    });


}
/**
 * 各年龄段的主题消费占比
 */

function parchaceAge(){
    departmentChart = echarts.init(document.getElementById('departmentId'));
    $.ajax({
        type : "GET",
        url : "/analyze/chance",
        data : null,
        dataType : "json",
        success : function (data) {
            /*
            // 中间滚动数据展示
            for(var j = 0; j < data.length; j++) {
                $(".main_list_title_num"+(j+1)).addClass("counter-value").text(data[j].value)
                $(".main_list_title"+(j+1)).text(data[j].name)
            }
            */
            var option = {
                color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    itemWidth: 15,// 标志图形的长度
                    itemHeight: 15,// 标志图形的宽度
                    orient: 'vertical',
                    // left: 'right',
                    top: '30%',
                    bottom: '50%',
                    x: '5%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 8,

                    },
                    data: data,
                },
                series: [
                    {
                        name: '数量占比',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        center: ['78%', '52%'],
                        labelLine: {
                            normal: {
                                length: 12,
                                lineStyle: {
                                    type: 'solid',
                                    color: '#0EFCFF'
                                }
                            }

                        },
                        label: {
                            normal: {
                                formatter: (params)=>{
                                    return params.name
                                },
                                borderWidth: 0,
                                borderRadius: 4,
                                padding: [0,0],
                                height: 20,
                                fontSize: 8,
                                align: 'center',
                                color: '#0EFCFF',
                            }
                        },
                        data: data
                    },
                    {
                        color: '#0EFCFF',
                        type: 'pie',
                        radius: ['55', '56'],
                        center: ['78%', '52%'],
                        data: [100],
                        label: {
                            show: false
                        }
                    },
                    {
                        type: 'pie',
                        radius: ['25', '26'],
                        center: ['78%', '52%'],
                        data: [100],
                        label: {
                            show: false
                        }
                    }
                ]
            };
            //消除之前数据
            departmentChart.clear()
            departmentChart.setOption(option)
        }

    })
}


// 男女热销季节差异
function contentFn() {

    contentChart = echarts.init(document.getElementById('contentId'));

    $.ajax({
        type: "GET",
        url: "/analyze/seasonDifference",
        data: null,
        dataType: "json",
        success: function (data) {

            const colors = ['#FD9133', '#3493FF'];
            let option = {
                color: colors,
                tooltip: {
                    trigger: 'none',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                legend: {},
                grid: {
                    top: 70,
                    bottom: 50
                },
                xAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return (
                                        'Precipitation  ' +
                                        params.value +
                                        (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                    );
                                }
                            }
                        },
                        // 下方数据
                        data:  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    },
                    {
                        type: 'category',
                        axisTick: {
                            alignWithLabel: true
                        },
                        axisLine: {
                            onZero: false,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisPointer: {
                            label: {
                                formatter: function (params) {
                                    return (
                                        '月份--消费  ' +
                                        params.value +
                                        (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                    );
                                }
                            }
                        },
                        // 上方数据
                        data:  ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '女生',
                        type: 'line',
                        xAxisIndex: 1,
                        smooth: true,
                        emphasis: {
                            focus: 'series'
                        },
                        data: data[0]
                        //     [
                        //     2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        // ]
                    },
                    {
                        name: '男生',
                        type: 'line',
                        smooth: true,
                        emphasis: {
                            focus: 'series'
                        },
                        data: data[1]
                        //     [
                        //     3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
                        // ]
                    }
                ]
            };
            contentChart.clear()
            contentChart.setOption(option)

        }
    });



    // setInterval(function() {
    //     contentChart.clear()
    //     contentChart.setOption(option)
    // },90000)
}
// 巡察
function publicNumFn() {
    /*
    var data = [
        ['score', 'amount', 'product'],
        [89.3, 58212, 'Matcha Latte'],
        [57.1, 78254, 'Milk Tea'],
        [74.4, 41032, 'Cheese Cocoa'],
        [50.1, 12755, 'Cheese Brownie'],
        [89.7, 20145, 'Matcha Cocoa'],
        [68.1, 79146, 'Tea'],
        [19.6, 91852, 'Orange Juice'],
        [10.6, 101852, 'Lemon Juice'],
        [32.7, 20112, 'Walnut Brownie']
    ]

     */

    publicNumChart = echarts.init(document.getElementById('publicNumId'));

    $.ajax({
        type: "GET",
        url: "/analyze/publicProduct",
        data: null,
        dataType: "json",
        success: function (data) {

            let option = {
                color: ['#FD9133', '#47F6A2', '#37D2D4', '#3493FF'],
                dataset: {
                    source: data
                },
                grid: { containLabel: true },
                xAxis: {
                    type: 'category' ,
                    axisLabel:{
                        interval:0,//0：全部显示，1：间隔为1显示对应类目，2：依次类推
                        rotate:-30,//倾斜显示，-：顺时针旋转，+或不写：逆时针旋转
                        color:"#FFF"
                    }
                },
                yAxis: {
                    name: '销售总额' ,
                    axisLabel:{
                        color:"#FFF"
                    }
                },
                label: {
                    show: true,
                    position: 'inside',
                    color:'#FFF'
                },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            y: 'amount',
                            // Map the "product" column to Y axis
                            x: 'product'
                        }
                    }
                ]
            };

            publicNumChart.setOption(option)

        }
    });

    // setInterval(function () {
    //     publicNumChart.clear()
    //     publicNumChart.setOption(option)
    // }, 60000)

}

</script>
